<template>
  <div>

    <el-input v-model="queryList.goodsName" clearable class="filter-item" style="width: 200px;"
              :placeholder="$t('请商品名称')"/>

    <el-input v-model="queryList.userName" clearable class="filter-item" style="width: 200px;" :placeholder="$t('会员')"/>

    <el-date-picker v-model="queryList.exchangeTime" class="filter-item"
                    :editable="false" :clearable="true" :placeholder="$t('兑换时间')" format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"></el-date-picker>


    <el-select v-model="queryList.shopId" filterable clearable class="filter-item" :placeholder="$t('使用门店')">
      <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
    </el-select>


    <el-button class="filter-item" type="primary" icon="el-icon-search" v-permission="['GET /admin/p/point_exchange_statistic']" @click="handleFilter">{{$t('Search')}}
    </el-button>
    <el-card>
      <el-table :data="orderList" :element-loading-text="$t('Searching')" border fit highlight-current-row>

        <el-table-column align="center" :label="$t('积分兑换名称')" prop="pointExchangeName">
        </el-table-column>

        <el-table-column align="center" :label="$t('商品名称')" prop="goodsName">

        </el-table-column>


        <el-table-column align="center" :label="$t('规格')" prop="specificationsName">
        </el-table-column>

        <el-table-column align="center" :label="$t('属性')" prop="properties">
          <!--          <template slot-scope="scope">{{ formateProperties(scope.row.properties)  }}</template>-->
          <template slot-scope="scope">
            <el-row v-for="property in scope.row.properties">
              {{property.name}}
            </el-row>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('辅料')" prop="accessories">
          <!--          <template slot-scope="scope">{{ formateAccessories(scope.row.accessories)  }}</template>-->
          <template slot-scope="scope">
            <el-row v-for="accessory in scope.row.accessories">
              {{accessory.accessoryName}}
            </el-row>
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('价值')" prop="goodsPrice">
          <template slot-scope="scope">
            ${{scope.row.goodsPrice}}
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('积分')" prop="points">
        </el-table-column>

        <el-table-column align="center" :label="$t('会员')" prop="userName">
        </el-table-column>

        <el-table-column  align="center" :label="$t('兑换时间')" prop="exchangeTime">
          <template slot-scope="scope">
            {{formattedDateTime(scope.row.exchangeTime)}}
          </template>
        </el-table-column>

        <el-table-column align="center" :label="$t('使用门店')" prop="shopName">
        </el-table-column>
        <el-table-column align="center"  :label="$t('Operate')" class-name="small-padding fixed-width"  width="150">
          <template slot="header" slot-scope="{row}">
            {{$t('Operate')}}
            <i class="el-icon-setting"style="color: #d35e32"></i>
          </template>
          <template slot-scope="scope">
            <el-row>
              <el-button icon="el-icon-s-goods" @click="handleDetail(scope.row)" >{{ $t('Order_details') }}</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>


      <pagination v-show="total>0" :total="total" :page.sync="queryList.page" :limit.sync="queryList.limit"
                  @pagination="getList"/>
    </el-card>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import ElSelectDropdown from 'element-ui/packages/select/src/select-dropdown'
  import BackToTop from '@/components/BackToTop'
  import { queryOrderInCoupon } from '../../api/coupon'
  import { logByPointExchange } from '../../api/exchange'
  import { allForPerm } from '../../api/shop'
  import {formatDate, formattedDateTime} from "../../utils/date";

  export default {
    name: 'exchangeTypeStatisticDetail',
    components: { ElSelectDropdown, BackToTop, Pagination },
    data() {
      return {
        total: 0,
        queryList: {
          pointExchangeId: undefined,
          goodsName: undefined,
          userName: undefined,
          exchangeTime: undefined,
          shopId: undefined,
          name: '',
          page: 1,
          limit: 20
        },
        totalData: {
          total: undefined,
          recieveNum: undefined,
          usedNum: undefined,
          surplusNum: undefined,
          expiredNum: undefined,
          totalOrderPrice: undefined,
          totalCouponPrice: undefined
        },
        orderList: [],
        shops: []
      }
    },
    methods: {
      formattedDateTime,
      formatDate,
      init() {
        this.queryList.pointExchangeId = this.$route.query.totalData.exchangeId
        this.queryList.endTime = this.$route.query.endTime
        this.queryList.startTime = this.$route.query.startTime
        //通过id查询对应的订单数据
        this.getList()

        allForPerm().then(response => {
          this.shops = response.data.data.list
        })
      },
      getList() {

        logByPointExchange(this.queryList).then(response => {
          this.orderList = response.data.data.list
          this.total = response.data.data.total
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },

      //订单详情
      handleDetail(row) {
          this.$router.push({ path: '/order/detail', query: { id: row.properties[0].orderId } })
      },
      handleFilter() {
        this.getList()
      }
    },
    created() {
      this.init()
    }
  }
</script>

<style scoped>

</style>
